
import React, { Component, createRef, createContext, useContext } from "react";
import type { ReactNode } from 'react'
import axios from 'axios'
import './app.css'

interface BodyProps {
    products: iproducts[];
}
// interface iProps {
//     code: string;
//     message: string;
//     data: iproducts[];
// }

interface iProList{
    list: iPro[]
}
interface iPro { 
    icon:string
    name: string
}

interface iproducts{
    banners: string[]
    proid:string
    brand:string
    category: string
    proname:string
    originprice:number
    sales:number
    stock:number
    desc:string
    issale:number
    isrecommend:number
    discount:number
    isseckill:number
    img1:string
    img2:string
    img3:string
    img4:string
}

class Header extends Component { 
    render(): ReactNode {
        return <>
            <h1 className="header">首页</h1>
        </>
    }
}

class BodyContext extends Component { 


    componentDidMount(): void {
        
    setTimeout(()=>{ 
        //  console.log('componentDidMount',this.props.products);
         this.setState({products:this.props.products})
    },1000)
    }


    props:BodyProps ={
        products: []
    }
    constructor(props: BodyProps) {
        super(props);
        this.state = {
            products: []
        };
    }
    render(): ReactNode {
        const { products } = this.props;
         return (
        <div className="body">
            <div className="product-list">
                { Array.isArray(products) && products.length > 0 ? (
                    products.map((product, index) => (
                        <div key={index} className="product-item">
                            <img src={product.img1} alt={product.proname} />
                            <span>
                                <h3>{product.proname}</h3>
                                <p>价格：{product.originprice}</p>
                                <p>销量：{product.sales}</p>
                            </span>
                        </div>
                    ))
                ) : (
                    <p>暂无商品数据</p>
                )}
            </div>
        </div>
    );
    }
}

function Footer(props: iProList){
    return<> 
    <footer> 
        {props.list.map((item:iPro,index)=>{ 
            return <div key={index}>
                <img src={item.icon} alt=""/>
                <div>{item.name}</div>
            </div>
        })}
    </footer>
    </>
}

export default class App extends Component{

    state:iProList & { products: iproducts[] } ={
        list:[
            {
                icon:'/0704hw/home.png',
                name:'首页'
            },
            {
                icon:'/0704hw/分类.png',
                name:'分类'
            },
            {
                icon:'/0704hw/购物车.png',
                name:'购物车'
            },
            {
                icon:'/0704hw/我的.png',
                name:'我的'
            }
        ],
        products: []
    }

    componentDidMount(): void {
       axios.get('http://121.89.205.189:3000/api/pro/list')
        .then(res => {
            this.setState({ products: res.data.data || [] });
        })
        .catch(err => {
            console.error("请求失败:", err);
        });
    }

    render() {
        return <>
            <div>
                <Header />
                <BodyContext products={this.state.products}/>
                <Footer list={this.state.list}/>
            </div>
        </>
    }

}